::v-deep .van-nav-bar {
    background-color: white;
    box-shadow: 0 0 5px #ccc;

    .van-icon {
        color: #000;
    }
}

.header-item {
    margin-left: 8px;
}

.separator {
    height: 8px;
    width: 1px;
    background-color: #aaa;
}

.subscribe-btn {
    color: orange;
}

.comment-inp {
    width: 164px;
}

::v-deep .van-search__content {
    background-color: rgba(0, 0, 0, .05);
}

.content-wrapper {
    width: 100vw;
    height: calc(100vh - 96px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px;
    box-sizing: border-box;

    .content {
        height: auto;
        font-size: 14px;
        background-color: #fff;

        .header {
            .title {
                font-size: 32px;
                margin-top: 16px;
                margin-bottom: 16px;
                line-height: 1.4;
            }
            .article-info {
                // BFC ( Block Format Context )
                // 块级格式化上下文
                overflow: hidden;
                margin-bottom: 16px;

                >div {
                    float: left;
                    margin-right: 8px;
                }
            }
            .author-info {
                overflow: hidden;
                display: grid;
                grid-template-columns: 36px 1fr 70px;
                align-items: center;
                font-size: 17px;
                gap: 8px;
            }
        }

        .footer {
            text-align: right;
            padding: 32px;
        }
    }
}

.comment-popup {
    height: 100vh;
    width: 100vw;

    // .comment {
    //     .content-wrapper .content .comment;
    // }

    .sub-comment-inp {
        width: 295px;
    }
}

